<template>
  <el-dropdown>
    <el-button title="图" type="info" plain icon="DataLine" @mouseover="initMenu"></el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item icon="Plus" @click="openForm(false)">添加图</el-dropdown-item>
        <el-dropdown-item v-if="chooseGraphInfo.choose" icon="Edit" @click="openForm(true)">编辑图</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <Graph_edit_win app-model="KNOW" :submit-handle="insertGraph" ref="graphEditWinRef">
  </Graph_edit_win>
</template>
<script setup lang="ts">
import Farm2Request from "@/service/remoteRequests/Farm2Request";
import Graph_edit_win from "@/views/demo/other/vue_flow/graph_edit_win.vue";
import { Editor } from "@tiptap/vue-3";
import { reactive, ref } from "vue";
const graphEditWinRef = ref();
const chooseGraphInfo = reactive({ choose: false, id: '' });
const props = defineProps({
  editor: {
    type: Editor,
    required: true,
  }
});
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
const insertGraph = (id: string) => {
  //插入超链接
  props.editor
    .chain()
    .focus()
    .insertContent({
      type: 'graph',
      attrs: {
        src: Farm2Request.getFullPath('api/wgraph/download/' + id + "?t=" + Date.now().toString()),
        text: "图:选中后通过菜单编辑图",
        id: id,
      },
    })
    .run();
  graphEditWinRef.value.openWin(false);
}

const openForm = (isEdit: boolean) => {
  graphEditWinRef.value.openWin(true, (chooseGraphInfo.choose && isEdit) ? chooseGraphInfo.id : null);
}


const initMenu = () => {
  // 获取当前编辑器的状态
  const { state } = props.editor;
  // 从状态中获取选中的内容
  const { selection, doc } = state;
  // 获取选中位置的详细信息
  const nodeAtSelection = doc.nodeAt(selection.from);
  if (nodeAtSelection && nodeAtSelection.type.name === 'graph') {
    chooseGraphInfo.choose = true;
    const graph = props.editor.getAttributes('graph');
    chooseGraphInfo.id = graph.id;
  } else {
    chooseGraphInfo.choose = false;
    chooseGraphInfo.id = '';
  }
}

//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
</script>
<style>
.skc-graph {
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid rgb(142, 158, 215);
  text-align: center;

  .skc-text-box {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgb(142, 158, 215);
    padding: 4px 20px;
    font-size: 14px;
    opacity: 0.8;

    .skc-text {
      color: #ffffff;
    }
  }
}
</style>
<style scoped>
/* 样式可以根据需要添加 */
.editor-button-bar .el-button {
  width: 32px;
  height: 32px;
  margin: 1px;
}

.editor-button-bar .el-button {
  width: 32px;
  height: 32px;
  margin: 1px;
  border-color: #f4f4f5;
}

.editor-button-bar .el-dropdown {
  border: 0px solid #f4f4f5;
}
</style>
